<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络连接测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .container {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            margin-top: 20px;
        }
        button {
            padding: 10px 15px;
            background-color: #007aff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #0051a8;
        }
        #result {
            margin-top: 20px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 5px;
            white-space: pre-wrap;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <h1>网络连接测试</h1>
    <div class="container">
        <h2>测试后端接口连接</h2>
        <button onclick="testBackendConnection('http://127.0.0.1:8080')">测试根路径</button>
        <button onclick="testBackendConnection('http://localhost:8080/auth/sendCode/19852725830')">测试验证码接口</button>
        <button onclick="testBackendConnection('https://www.baidu.com')">测试外部网站</button>
        <div id="result">点击按钮开始测试...</div>
    </div>

    <script>
        function testBackendConnection(url) {
            const resultElement = document.getElementById('result');
            resultElement.textContent = `正在连接 ${url}...`;
            
            // 记录开始时间
            const startTime = new Date().getTime();
            
            // 创建一个新的XMLHttpRequest对象
            const xhr = new XMLHttpRequest();
            
            // 设置请求方法和URL
            xhr.open('GET', url, true);
            
            // 设置请求头
            xhr.setRequestHeader('isToken', 'false');
            
            // 设置超时时间
            xhr.timeout = 10000; // 10秒
            
            // 设置响应类型
            xhr.responseType = 'json';
            
            // 请求成功的回调函数
            xhr.onload = function() {
                const endTime = new Date().getTime();
                const responseTime = endTime - startTime;
                
                if (xhr.status >= 200 && xhr.status < 300) {
                    resultElement.textContent = `
连接成功!
URL: ${url}
状态码: ${xhr.status}
响应时间: ${responseTime}ms
响应内容: ${JSON.stringify(xhr.response, null, 2)}
请求头: ${JSON.stringify(getHeaders(xhr.getAllResponseHeaders()), null, 2)}
`;
                } else {
                    resultElement.textContent = `
连接失败!
URL: ${url}
状态码: ${xhr.status}
响应时间: ${responseTime}ms
错误信息: ${xhr.statusText}
`;
                }
            };
            
            // 请求失败的回调函数
            xhr.onerror = function() {
                const endTime = new Date().getTime();
                const responseTime = endTime - startTime;
                resultElement.textContent = `
连接错误!
URL: ${url}
响应时间: ${responseTime}ms
错误信息: 网络连接异常`;
            };
            
            // 请求超时的回调函数
            xhr.ontimeout = function() {
                const endTime = new Date().getTime();
                const responseTime = endTime - startTime;
                resultElement.textContent = `
连接超时!
URL: ${url}
超时时间: ${xhr.timeout}ms
`;
            };
            
            // 发送请求
            xhr.send();
        }
        
        // 解析响应头字符串为对象
        function getHeaders(headersString) {
            const headers = {};
            headersString.split('\n').forEach(line => {
                const parts = line.split(': ');
                if (parts.length === 2) {
                    headers[parts[0]] = parts[1];
                }
            });
            return headers;
        }
    </script>
</body>
</html>